<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- styles here -->
    <link href="../../public/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../public/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="../../public/css/animate.css" rel="stylesheet">
    <link href="../../public/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="../../public/css/plugins/jsTree/default/style.min.css" rel="stylesheet">
</head>

<body>
<div id="app">
    <div v-show="showList" class="col-sm-12">
        <div id="toolbar">
            <button id="add-new" type="button" class="btn btn-primary" @click="add">
                <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                新增
        </button>
            <button id="edit" type="button" class="btn btn-primary" @click="update">
                <i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
                修改
        </button>
            <button type="button" class="btn btn-primary" @click="del">
                <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                删除
        </button>
        </div>
        <table id="roleTable" data-mobile-responsive="true" data-icon-size="outline" data-search="true"></table>
    </div>
    <div v-show="!showList" class="wrapper wrapper-content col-sm-12" id="admin-form">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">{{title}}</h3>
                </div>
                <div class="panel-body">
                    <div class="col-sm-4 b-r">
                        <form role="form">
                            <div class="form-group">
                                <label>角色名称</label>
                                <input data-field="id" type="text" v-model="role.roleName" placeholder="角色名称" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>角色描述</label>
                                <input data-field="name" type="text" v-model="role.remark" placeholder="角色描述" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>菜单权限</label>
                                <div id="menu-tree"></div>
                            </div>
                            <div class="col-sm-4 text-center">
                                <a class="btn btn-sm btn-primary m-t-n-xs" @click="saveOrUpdate"><strong>确 定</strong></a>
                                <a class="btn btn-sm btn-warning m-t-n-xs" @click="cancel"><strong>返 回</strong></a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
    </div>
</div>
    <!-- scripts here -->
    <script src="../../public/js/jquery.min.js?v=2.1.4" type="text/javascript"></script>
    <script src="../../public/js/vue.min.js" type="text/javascript"></script>
    <script src="../../public/js/plugins/jsTree/jstree.js" type="text/javascript"></script>
    <script src="../../public/js/bootstrap.min.js?v=3.3.6" type="text/javascript"></script>
    <script src="../../public/js/plugins/layer/layer.js" type="text/javascript"></script>
    <script src="../../public/js/plugins/bootstrap-table/bootstrap-table.min.js" type="text/javascript"></script>
    <script src="../../public/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js" type="text/javascript"></script>
    <script src="../../public/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js" type="text/javascript"></script>
    <script src="../../public/js/plugins/bootstrap-table/bootstrap-table-obj.js" type="text/javascript"></script>
    <script src="../js/role.js"></script>
</body>

</html>